<!-- banner -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
        *{
            margin: 0px;
            padding: 0px;
            list-style: none;
        }
        div{
            width: 1000px;
            height: 600px;
            margin: 100px auto;
            position: relative;
            overflow: hidden;
        }
        ul{
            width: 9999px
        }
        ul li{
            float: left;
        }
        ol{
            position: absolute;
            bottom: 10px;
            left: 50%;
            transform: translateX(-50%);
        }
        ol li{
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: black;
            float: left;
            margin: 0px 4px;
            cursor: pointer;
        }
        span{
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background:red;
            cursor: pointer;
        }
        span:nth-of-type(1){
            left: 10px;
        }
        span:nth-of-type(2){
            right: 10px;
        }
        </style>
    </head>
    <body>
        <div id=wrap>
            <!-- 引入图片 -->
            <ul id=box>
                <li><img src="images/pic2.jpg" alt=""></li>
                <li><img src="images/pic1.jpg" alt=""></li>
                <li><img src="images/pic3.jpg" alt=""></li>
                <li><img src="images/pic4.jpg" alt=""></li>
            </ul>
            <!-- ol>li一般引入有序的内容，实现小圆点 -->
            <ol>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ol>
            <!-- 左右 -->
            <span class="left">左</span>
            <span class="right">右</span>
        </div>
    </body>
    <script>
        var box=document.getElementById('box');
        var wrap=document.getElementById('wrap');
        var num=0;
        var timer;
        //重复代码封装
        function fn(){
            timer=setInterval(function(){
                num++;
                if(num>3){
                    num=0
                }
                n=-520*num;
                box.style.transform='translateX('+n+'px)'
                box.style.transition='all 1s' 
                transform
            },2000)
        }
        //使用函数执行函数代码
        fn()
        //鼠标移入停止
        wrap.onmouseenter=function(){
            clearInterval(timer)
        }
        //鼠标移除开始
        wrap.onmouseleave=function(){
            fn()
        }
        
    </script>
</html>